<template>
    <a-spin tip="上传文件..." :spinning="loading" class="clearfix">
        <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true" :disabled="disabled"
            :customRequest="uploadFilesCustomRequest" :remove="removeFile">
            <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">点击或拖拽上传文件</p>
        </a-upload-dragger>
    </a-spin>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { InboxOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { uploadFile } from '@/api/upload'
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    list: {
        type: Array,
        default: () => []
    }
})
const emit = defineEmits(['delete', 'upload'])
//显示上传文件
const fileList = computed(() => {
    let fileList: any[] = [];
    let list = props.list;
    if (list && list.length) {
        list.map((item: any, index: number) => {
            let name = item.substring(item.lastIndexOf('/') + 1);
            fileList.push({
                uid: index,
                status: 'done',
                index:index,
                name: name,
                url: item
            });
        });
    }
    return fileList;
});
//上传loading
const loading = ref<boolean>(false);
//上传文件
const uploadFilesCustomRequest = async (data: any) => {
    loading.value = true;
    try {
        await dealUploadFile(data)
        message.success('上传成功')
    } finally {
        loading.value = false
    }
}
//处理上传文件
const dealUploadFile = async (fileItem:any) => {
    try {
        const formData = new FormData();
        formData.append('file', fileItem.file);
        let res = await uploadFile(formData);
        let { data } = res;
        emit('upload', data);
    } catch (err) {
        console.log(err);
    } finally {
    }
}
//删除文件
const removeFile = async (file: any) => {
    emit('delete', file);
}
</script>